<template>
    <el-card :style="`height:${view.height - 140}px`">
        <!-- Tabs for engine categories -->
        <el-tabs v-model="activeTab" type="card" style="height: 100%;">
          <!-- 变化检测 -->
          <el-tab-pane label="变化检测" name="changeDetection">
            <div class="engine-card-list">
              <engine-card v-for="engine in changeDetectionEngines" :key="engine.id" :icon="engine.icon"
                :name="engine.name" :description="engine.description" :upload-unit="engine.uploadUnit"
                :associated-models="engine.associatedModels" :status="engine.status" :created-time="engine.createdTime"
                :usage-stats="engine.usageStats" />
            </div>
          </el-tab-pane>

          <!-- 目标检测 -->
          <el-tab-pane label="目标检测" name="targetDetection">
            <div class="engine-card-list">
              <engine-card v-for="engine in targetDetectionEngines" :key="engine.id" :icon="engine.icon"
                :name="engine.name" :description="engine.description" :upload-unit="engine.uploadUnit"
                :associated-models="engine.associatedModels" :status="engine.status" :created-time="engine.createdTime"
                :usage-stats="engine.usageStats" />
            </div>
          </el-tab-pane>

          <!-- 地物分类 -->
          <el-tab-pane label="地物分类" name="landCoverClassification">
            <div class="engine-card-list">
              <engine-card v-for="engine in landCoverClassificationEngines" :key="engine.id" :icon="engine.icon"
                :name="engine.name" :description="engine.description" :upload-unit="engine.uploadUnit"
                :associated-models="engine.associatedModels" :status="engine.status" :created-time="engine.createdTime"
                :usage-stats="engine.usageStats" />
            </div>
          </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script setup>
import { ref ,reactive} from "vue";
import EngineCard from "./EngineCard.vue";

// Active tab in the center area
const activeTab = ref("changeDetection");

const changeDetectionEngines = ref([
  ...Array.from({ length: 9 }, (_, i) => ({
    id: i + 1,
    icon: "https://img0.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: `变化检测引擎 ${i + 1}`,
    description: `这是一个非常独特的变化检测引擎，功能丰富，适合多种场景。编号 ${i + 1}`,
    uploadUnit: `单位 A${i + 1}`,
    associatedModels: [
      { name: `模型 Alpha ${i + 1}`, version: `${(1.0 + i * 0.1).toFixed(2)}`, color: i % 2 === 0 ? "success" : "primary" },
      { name: `模型 Beta ${i + 1}`, version: `${(2.0 + i * 0.2).toFixed(2)}`, color: i % 2 === 0 ? "warning" : "danger" },
    ],
    status: i % 3 === 0 ? "正常" : i % 3 === 1 ? "维护中" : "升级中",
    createdTime: `2025-01-${String(i + 1).padStart(2, '0')}`,
    usageStats: 123 + i * 17,
  })),
]);

const targetDetectionEngines = ref([
  ...Array.from({ length: 9 }, (_, i) => ({
    id: i + 11,
    icon: "https://img0.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: `目标检测引擎 ${i + 1}`,
    description: `目标检测引擎 ${i + 1} 是一款性能卓越的引擎，支持多任务处理。` + (i % 2 === 0 ? "支持高并发。" : "具有高效能量管理。"),
    uploadUnit: `单位 B${i + 1}`,
    associatedModels: [
      { name: `模型 Gamma ${i + 1}`, version: `${(1.5 + i * 0.1).toFixed(2)}`, color: i % 2 === 0 ? "primary" : "success" },
      { name: `模型 Delta ${i + 1}`, version: `${(2.5 + i * 0.2).toFixed(2)}`, color: "danger" },
    ],
    status: i % 3 === 0 ? "正常" : i % 3 === 1 ? "维护中" : "优化中",
    createdTime: `2025-01-${String(i + 11).padStart(2, '0')}`,
    usageStats: 456 + i * 23,
  })),
]);

const landCoverClassificationEngines = ref([
  ...Array.from({ length: 9 }, (_, i) => ({
    id: i + 21,
    icon: "https://img0.baidu.com/it/u=1727109705,2461211554&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: `地物分类引擎 ${i + 1}`,
    description: `地物分类引擎 ${i + 1} 提供了创新的地表覆盖分类解决方案。${i % 2 === 0 ? "适用于复杂地形分析。" : "支持实时分类功能。"}`,
    uploadUnit: `单位 C${i + 1}`,
    associatedModels: [
      { name: `模型 Epsilon ${i + 1}`, version: `${(3.0 + i * 0.1).toFixed(2)}`, color: "success" },
      { name: `模型 Zeta ${i + 1}`, version: `${(4.0 + i * 0.2).toFixed(2)}`, color: i % 2 === 0 ? "warning" : "primary" },
    ],
    status: i % 3 === 0 ? "正常" : i % 3 === 1 ? "维护中" : "测试中",
    createdTime: `2025-01-${String(i + 21).padStart(2, '0')}`,
    usageStats: 789 + i * 30,
  })),
]);

var view = reactive({
    height: window.innerHeight,
});

</script>

<style scoped>
.engine-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
</style>